<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <button @click="incrementCount1">累加count</button>
    <button @click="incrementNCount1({ n: 2 })">累加count</button>
  </div>
</template>

<script>
//vuex提供了一个mapMutations的辅助函数，专门用来方便commit store中的mutations函数
import { mapState, mapMutations } from "vuex";
export default {
  name: "count",
  computed: {
    /* mapState还可以接收一个对象，对象的key就是计算属性的名称，对象的value就是vuex中state数据的名称 */
    ...mapState({ count: "count", num: "num" }),
  },
  methods: {
    /* mapMutations还可以接收一个对象，对象的key就是生成的函数名，对象的值就是mutations中的事件名 */
    ...mapMutations({
      incrementCount1: "incrementCount",
      incrementNCount1: "incrementNCount",
    }),
  },
};
</script>

<style></style>
